var templat=`<div id="home-content">
    <div id="hedaerall">
        <div class="header-top">
            <div class="header-top-content">
                <div class="headr-top-left">
                    <span class="heder-top-login" @click="goToLogin">
                       {{logintext}}
                    </span>
                    <span class="header-top-jiange">|</span>
                    <span class="hader-top-register">
                        <a href="javascript:;" style="color: #FDEC8F" @click="loginOrOutSyster">{{loginOrOut}}</a>
                    </span>
                   <span class="header-top-tel">
                       <img src="../images/header-tel@2x.png" alt="电话">
                       <span>客服热线：010-65889635</span>
                   </span>
                </div>
                <ul class="headr-top-right">
                    <li class="top-right-item-li"><span>帮助中心</span><span class="header-jiange">|</span></li>
                    <li class="top-right-item-li"><span>保险攻略</span><span class="header-jiange">|</span></li>
                    <li class="top-right-item-li" style="position: relative" id="webHttp">
                        <span >网址导航 <span class="header-jiange">|</span></span>
                        <ul class="website-nav" id="website-nav-box">
                            <li class="website-nav-item-li"><a href="javascript:;">首页的</a></li>
                            <li class="website-nav-item-li"><a href="javascript:;">首页多发</a></li>
                        </ul>
                    </li>
                    <li class="header-top-love top-right-item-li">
                        <img src="../images/header-icon-heart-full@2x.png" alt="收藏">
                        <span>收藏本站</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="heder-bottom">
            <div class="header-bottom-content">
                <div class="hader-bottom-logo">
                    <a href="javascript:;" class="logo-img-a">阳光三泰</a>
                </div>
                <div class="hader-bottom-nav">
                    <ul class="heder-large-menu" id="largeMenu">
                        <li class="heder-large-menu-item ">
                            <a href="javascript:;" class="menu-a-link":class="{'heder-large-menu-active':activeindex=='1'}">首页</a>
                        </li>
                        <li class="heder-large-menu-item">
                            <a href="javascript:;" class="menu-a-link":class="{'heder-large-menu-active':activeindex=='2'}">产品中心</a>
                        </li>
                        <li class="heder-large-menu-item">
                            <a href="javascript:;" class="menu-a-link":class="{'heder-large-menu-active':activeindex=='3'}">保险公司</a>
                        </li>
                        <li class="heder-large-menu-item ">
                            <a href="javascript:;" class="menu-a-link":class="{'heder-large-menu-active':activeindex=='4'}">服务中心</a>
                            <i class="icon-down"></i>
                            <ul class="header-smal-menu">
                                <li class="smal-item-menu" v-for="(item,k) in serverCenter" :key="k" @click="goToPage(item)">
                                    <a href="javascript:;" class="smal-item-link">{{item}}</a>
                                 </li>

                            </ul>
                        </li>
                        <li class="heder-large-menu-item">
                            <a href="javascript:;" class="menu-a-link":class="{'heder-large-menu-active':activeindex=='5'}">个人中心</a>
                            <i class="icon-down"></i>
                            <ul class="header-smal-menu">
                                <li class="smal-item-menu">
                                    <a href="javascript:;" class="smal-item-link">我的订单</a>
                                </li>
                                <li class="smal-item-menu">
                                    <a href="javascript:;" class="smal-item-link">消息中心</a>
                                </li>
                                <li class="smal-item-menu">
                                    <a href="javascript:;" class="smal-item-link">修改密码</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="hader-bottom-search">
                    <div class="header-search-content">
                        <input type="text" placeholder="请输入您想查询的保险产品" class="header-search-text">
                    </div>
                    <span class="header-search-button" @click="goToUrl()">搜索</span>

                </div>
            </div>
        </div>
    </div>

</div>`

Vue.component('headerall', {
    template: templat,
    props: {
        activeindex: {
            type: String,
            default: '1'
        }
    },

    data: function () {
        return {
            loginFlag:false,//默认未登陆
            logintext:'hi，欢迎来到保险中介平台，请登陆',
            loginOrOut:'免费注册',
            serverCenter:['保单查询','投保问题','问题反馈'],
            userInfo:{
                sessionid:'',
                name:''
            }

        }
    },
    created: function () {
        this.userInfo=getSessionStorage('userInfo',true)?getSessionStorage('userInfo',true):{sessionid:'', name:''}
        this.checklogin()
    },
    mounted: function () {

    },
    methods: {
        checklogin:function(){
            var _this=this;
            _axios({
                url: '/api/login/checklogin',
                method: 'post',
                data: {
                    sessionid:_this.userInfo.sessionid,
                },
            }).then(function (res) {
                var result=res.data;
                if(result.code=='200'){
                    if(result.message=='yes'){
                        _this.logintext=_this.userInfo.name+"你好，欢迎回来";
                        _this.loginOrOut="退出";
                        _this.loginFlag=true
                    }else{
                        _this.logintext="hi，欢迎来到保险中介平台，请登陆"
                        _this.loginOrOut="免费注册";
                        _this.loginFlag=false
                    }
                }else{
                    _this.$message({
                        message: result.message,
                        type: 'warning'
                    });
                }

            }).catch(function (err) {
                _this.$message({
                    message: err.message,
                    type: 'warning'
                });
            });
        },
        goToLogin:function(){
            if(!this.loginFlag){
                gotoUrl('登陆')
            }
        },
        outlogin:function(){
            var _this=this;
            _axios({
                url: '/api/login/outlogin',
                method: 'post',
                data: {
                    sessionid:_this.userInfo.sessionid,
                },
            }).then(function (res) {
                var result=res.data;
                if(result.code=='200'){
                    _this.logintext="hi，欢迎来到保险中介平台，请登陆"
                    _this.loginOrOut="免费注册";
                    _this.loginFlag=false
                    removeSessionStorage('userInfo')
                }else{
                    _this.$message({
                        message: result.message,
                        type: 'warning'
                    });
                }

            }).catch(function (err) {
                _this.$message({
                    message: err.message,
                    type: 'warning'
                });
            });
        },
        loginOrOutSyster:function(){
            if(!this.loginFlag){
                //没有登陆跳转到登陆注册页面
                gotoUrl('登陆')
            }else{
                //已经登陆  退出
                this.outlogin()
            }
        },
        goToPage:function(val){
            gotoUrl(val)
        }


    }
})
